<template>
  <component :is="Com"></component>
</template>

<script setup>
import { ref, reactive, h, computed, useAttrs } from "vue";
import * as ArcoIcon from "@arco-design/web-vue/es/icon";

const props = defineProps({
  name: String
});
const attrs = useAttrs();
const Com = computed(() => {
  const name = props.name;
  const IconFont = () =>
    h("i", { style: "font-size: 18px", class: `iconfont icon-${name}` });
  return () => h(ArcoIcon[name] || IconFont, { size: 18, ...attrs });
});
</script>

<style lang="less" scoped></style>
